﻿
/*changes button size for phone size similar to Iphone4 && Nexus S*/
@media screen and (max-height: 535px) {
    .profileButton {
        display: inline-block;
        height: 120px;
        width: 100%;
        max-width: 135px;
        white-space: normal;
    }

    #specialNeedsButton {
        background-image: url(../Content/Image/specialNeedsRed.png);
        background-repeat: no-repeat;
        background-position: center;
        background-size: 50px 50px;
        padding-top: 80px;
    }

        #specialNeedsButton:hover, #specialNeedsButton:active {
            background-image: url(../Content/Image/specialNeedsWhite.png);
            background-repeat: no-repeat;
            background-position: center;
            background-size: 50px 50px;
            padding-top: 80px;
            background-color: #FF0033;
            color: white;
        }

    #medicalConditionsButton {
        background-image: url(../Content/Image/MedicalConditionsRed.png);
        background-repeat: no-repeat;
        background-position: center;
        background-size: 50px 50px;
        padding-top: 80px;
    }

        #medicalConditionsButton:active, #medicalConditionsButton:hover {
            background-image: url(../Content/Image/MedicalConditionsWhite.png);
            background-repeat: no-repeat;
            background-position: center;
            background-size: 50px 50px;
            padding-top: 80px;
            background-color: #FF0033;
            color: white;
        }

    #medicationsButton {
        background-image: url(../Content/Image/MedicationsRed.png);
        background-repeat: no-repeat;
        background-position: center;
        background-size: 50px 50px;
        padding-top: 80px;
    }

        #medicationsButton:active, #medicationsButton:hover {
            background-image: url(../Content/Image/MedicationsWhite.png);
            background-repeat: no-repeat;
            background-position: center;
            background-size: 50px 50px;
            padding-top: 80px;
            background-color: #FF0033;
            color: white;
        }

    #devicesButton {
        background-image: url(../Content/Image/devicesRed.png);
        background-repeat: no-repeat;
        background-position: center;
        background-size: 50px 50px;
        padding-top: 80px;
    }

        #devicesButton:active, #devicesButton:hover {
            background-image: url(../Content/Image/devicesWhite.png);
            background-repeat: no-repeat;
            background-position: center;
            background-size: 50px 50px;
            padding-top: 80px;
            background-color: #FF0033;
            color: white;
        }


    #allergiesButton {
        background-image: url(../Content/Image/peanutRed.png);
        background-repeat: no-repeat;
        background-position: center;
        background-size: 50px 50px;
        padding-top: 80px;
    }

        #allergiesButton:hover, #allergiesButton:active {
            background-image: url(../Content/Image/peanutWhite.png);
            background-repeat: no-repeat;
            background-position: center;
            background-size: 50px 50px;
            padding-top: 80px;
            background-color: #FF0033;
            color: white;
        }

    #emergencyContactButton:active, #emergencyContactButton:hover {
        background-image: url(../Content/Image/whiteCall.png);
        background-repeat: no-repeat;
        background-position: center;
        background-size: 50px 50px;
        padding-top: 80px;
        background-color: #FF0033;
        color: white;
        border: none;
    }

    #emergencyContactButton {
        background-image: url(../Content/Image/redCall.png);
        background-repeat: no-repeat;
        background-position: center;
        background-size: 50px 50px;
        padding-top: 80px;
    }
}

/*moves engravings closer to center of screen starting at 640*/
@media screen and (min-height:500px) {
    .engravings {
        margin-top: 80px;
    }
    .profileContent {
      z-index: 10;
  position: fixed;
  background-color: white;
  padding-left: 140px;
  padding-top: 10px;
}
}

@media screen and (min-height:300px) {
    .engravings {
        margin-top: 90px;
    }
}

@media screen and (max-height:568px) {
    .submitButtons
    {
        position: fixed;
        top: 300px;
    }
    
}

@media screen and (min-width:365px) {

    .submitButtons {
    position: fixed;
    bottom: 40px;
    margin-left: 12.5%;
        margin-right: 12.5%;
}
}
